﻿<!doctype html>
<html lang="en">
<head>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="jquery.min.js"></script>
	<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
  });
});



$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");
    div.animate({height:'400px',opacity:'0.4'},"slow");
    div.animate({width:'400px',opacity:'0.8'},"slow");
    div.animate({height:'200px',opacity:'0.4'},"slow");
    div.animate({width:'200px',opacity:'0.8'},"slow");
  });
});


</script>

<style>
.q{
	font-size:30px;

}
body > button{
	background:#B15BFF;
}

body > div.q > div{
	font-size:30;
	text-align:center;
	vertical-align:top;
}
</style>
</head>
<body bgcolor="#FFECF5" class="col-md-4">

<button class="q">Click here.</button>
<br />
<div id="div1" style="width:80px;height:80px;background-color:#BF0060;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:#009393;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:#FFFF6F;"></div>

<br />
<div  class="q" style="background:#00CACA;height:200px;width:200px;position:absolute;">
<div>zjke</div>

</div>

<div  class="q" style="background:#00CACA;height:200px;width:200px;position:absolute;">
<div>zjke</div>

</div>

	








</body>
</html>